<template>
  <div id="my-scroll-board">
    <div class="my-scroll-board">编制变动情况</div>
    <dv-scroll-board :config="config" />
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  name: 'MyScrollBoard',
  props: {
    dep_code: {
      type: String,
      default: '450000-00-0000',
      require: true
    }
  },
  data() {
    return {
      config: {
        header: ['时间', '机构名称', '编制', '实有'],
        data: [
          ['2019-07-01 19:25:00', '广西壮族自治区人大常委会', '15', '20']

        ],
        index: true,
        columnWidth: [50, 170, 300],
        align: ['center'],
        rowNum: 7,
        // headerBGC: 'rgba(0, 84, 126, 0.8)',
        headerBGC: 'rgba(0,186,255, 0.3)',
        headerHeight: 45,
        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
        evenRowBGC: 'rgba(10, 29, 50, 0.8)'
      },
      depcode: '450000-00-0000'
    }
  },

  watch: {
    dep_code(newValue, oldValue) {
      if (newValue) {
        (this.depcode = newValue), this.getBzbdqk()
      }
    }
  },
  mounted() {
    // this.getBzbdqk()
  },
  methods: {
    async getBzbdqk() {
      try {
        // 请求后台接口
        const res = await Sever.analyse.getBzbdqk({
          // 请求参数
          dep_code: this.depcode
        })

        // 传值给图表
        this.config.data = res[0]
        this.config = { ...this.config }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss">
#my-scroll-board {
  width: 100%;
  box-sizing: border-box;
  height: 32%;
  overflow: hidden;
}
.my-scroll-board {
  font-weight: bold;
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 18px;
  justify-content: center;
}
</style>
